import React from 'react';
import { connect } from 'react-redux';
import * as actions from './../../actions/a_appoint_steps';
import {stateChange} from './../../actions/a_appoint';
import {
  Button,
  CellHeader,
  CellBody,
  CellFooter,
  Form,
  FormCell,
  Icon,
  Input,
  Label,
  Radio,
  Checkbox,
  Toast
} from 'react-weui';
import moment from 'moment';
const IconBox = (props) => (
  <div className="icon-box">
    {props.icon}
    <div className="icon-box__ctn">
      <h3 className="icon-box__title">{props.title}</h3>
      <p className="icon-box__desc">{props.desc}</p>
    </div>
  </div>
)

class AppointStepsView extends React.Component {

  componentDidMount() {
    this.changeTitle();
  }

  componentDidUpdate() {
    this.changeTitle();
  }

  changeTitle() {

    let {
      match = {}
    } = this.props;

    let step = (match.params&&match.params.step) || '1';

    if (step === '1') {
      document.title = '填写姓名';
    } else if (step === '2') {
      document.title = '请选择企业';
    } else if (step === '3') {
      document.title = '填选择参课人';
    } else {
      document.title = '报名成功';
    }
  }

  render() {
    let {
        match = {},
        appointment = {},
        data = {},
        error = {}
    } = this.props;

    let step = (match.params&&match.params.step) || '1';
    let periodId = (match.params&&match.params.periodId) || '';


    return (
      <div className='appoint-steps'>
        {  // 如果已经绑定(有手机号),但是没有name, 则  填写姓名
          step === '1' && <div>
            <Form>
              <FormCell>
                <CellHeader className="step1__hd">
                  <Label>手机号</Label>
                </CellHeader>
                <CellBody>
                  <Label>{appointment.mobile}</Label>
                </CellBody>
              </FormCell>
              <FormCell>
                <CellHeader className="step1__hd">
                  <Label>姓名</Label>
                </CellHeader>
                <CellBody>
                  {
                    appointment.name&&appointment.name.length>0?
                    <Label>{appointment.name}</Label>:
                    <Input 
                    type="text" 
                    placeholder="请输入姓名"
                    value={appointment.name}
                    onChange={e => {

                    }}/>
                  }
                </CellBody>
              </FormCell>
            </Form>
            <Button
              onClick={ () => {
                let url = match.url || '';
                url = url.split('/');
                url.pop();
                this.props.dataChange('customerId', appointment.companies&&appointment.companies[0].id);
                if (appointment.companies&&appointment.companies.length > 0) {
                  url.push('2');
                } else {
                  url.push('3');
                }
                this.props.history.push(url.join('/'));
              }}
            >下一步</Button>
          </div>
        }
        {// 选择公司
          step === '2' && <div>
            <Form radio>
              {
                appointment.companies&&appointment.companies.map( (c, i) => {
                  return <FormCell radio key={i+''}>
                  <CellBody>{c.customerName}</CellBody>
                  <CellFooter>
                    <Radio name="company" value={c.id} 
                      checked={c.id === data.customerId}
                      onChange={ () =>{
                        this.props.dataChange('customerId', c.id)
                      }}
                    />
                  </CellFooter>
                </FormCell>
                })
              }
            </Form>
            <Button
              onClick={ () => {
                this.props.getContacts(data.customerId, appointment.periodId, () => {// 这里是获得公司里的可参课人, 将结果放到了state的contacts里面
                  let url = match.url || '';
                  url = url.split('/');
                  url.pop();
                  url.push('3');
                  this.props.history.push(url.join('/'));
                })
              }}
            >下一步</Button>
          </div>
        }
        {
          step === '3' && <div>
            <Form checkbox>
            {
              appointment.contacts&&appointment.contacts.personList&&appointment.contacts.personList.map( (person) => {
                let role = '';
                switch(person.role) {
                  case 1:
                    role = '联系人';
                    break;
                  case 2:
                    role = '决策人';
                    break;
                  case 3:
                    role = '主决策人';
                    break;
                  default:
                    break;
                }
                let persons = data.persons || [];
                let isSelected = persons.findIndex( (id) => {
                  return id === person.personId
                })
                return <FormCell checkbox key={person.personId}>
                  <CellHeader>
                    <Checkbox name="contacts" value={person.personId} 
                      checked={isSelected >= 0}
                      onChange={ () => {
                        let ps = data.persons||[];
                        if (isSelected < 0) {
                          ps.push(person.personId);
                        } else {
                          ps.splice(isSelected, 1);
                        }
                        this.props.dataChange('persons', ps);
                      }}
                    />
                  </CellHeader>
                  <CellBody className="step3-bd">{person.personName}<span className="classify">{role}</span></CellBody>
                </FormCell>
              })
            }
            </Form>
            <Button
              onClick={ () => {
                this.props.submitAppoint(periodId, () => {
                  let url = match.url || '';
                  url = url.split('/');
                  url.pop();
                  url.push('4');
                  this.props.history.push(url.join('/'));
                })
              }}
            >提交</Button>
          </div>
        }
        {
          step === '4' && <div className="appoint-success">
            <IconBox
              icon={<Icon size="large" value="success" />}
              title="您已经预约成功"
              desc={'请于'+moment(appointment.beginTime).format('YYYY年MM月DD日')+'准时参课'}
            />
            <Button
              onClick={ () => {
                // this.props.history.push('/appoint/accommodation/1/'+0000000);// +学习计划id
              }}
            >填写住宿信息</Button>
            <Button className="btn-back"
              onClick={ () => {
                this.props.history.push('/appoint/courses');
              }}
            >返回</Button>
          </div>
        }
        <Toast iconSize="" icon="warn" show={error.hasError}>{error.msg}</Toast>
      </div>

    )
  }
}

export default connect((store) => {
  return {
    ...store.appointSteps,
    appointment: store.appoint.state
  }
}, {
  ...actions,
  stateChange
})(AppointStepsView);
